<template>
	<view class="Del">
		<!-- 数据列表 -->
		<CardEC   type="Del" :headerRightSlot="true" :headerLeftSlot="true" v-for="item in value" :key="item.id">
			<template slot="headerLeft">
				<view>
					<text v-if="item.name" class="text-orange text-bold">{{item.name}}</text>
					<view v-else class="rloading" style="height: 40upx;width: 200upx;"></view>
				</view>
			</template>
			<template slot="headerRight">
				<view @click="recoverFn(item)" class="text-orange">
					<text  class="cuIcon-refresh "></text>还原
				</view>
			</template>
			<CardGrid @handle="handle" @recover="recoverFn" type="Del" :list="item.list"></CardGrid>
		</CardEC>

        <Divider v-if="value.length==0" text="暂无数据" />

		<!-- ios兼容 -->
		<view class="ios-safe"></view>
		<!-- 对话框 -->
		<Modal :show="option.show" @confirm="confirmModelFn" @cancel="cancelModelFn" title="提示">
			<view class="padding">
				{{option.name}}，是否确认还原?
			</view>
		</Modal>
	</view>
</template>

<script>
	import CardEC from '@/plugin/card_ec.vue';
	import CardGrid from '@/plugin/card_grid.vue';
	import Modal from '@/plugin/modal.vue';
	import Divider from '@/plugin/divider.vue';

	import * as api from '@/api/Del/index.js'
	export default {
		components: {
			CardEC,
			CardGrid,
			Modal,
			Divider
		},
		data() {
			return {
				value: [{
					list:[{},{},{}]
				},{
					list:[{},{},{}]
				}],
				option: {
					show: false,
				}
			}
		},
		onLoad() {
			this.getRequestFn();
		},
		methods: {
			// 阅读提示
			handle(value){
				uni.showModal({
					content:"该绘本在回收站中，请还原到书架后再阅读。",
					showCancel:false
				})
			},
			// 关闭弹窗
			cancelModelFn() {
				this.$set(this.option, 'show', false)
			},
			// 还原
			async confirmModelFn() {
				try {
					let res =this.option.list ? await api.restore(this.option.id,false) : await api.restore(false,this.option.id);
					if (res.code === 0) {
                        this.getRequestFn();
					}
				} finally {
					this.cancelModelFn();
				}
			},
			// 还原弹窗
			async recoverFn(item) {
				this.option = {
					show: true,
					...item
				}
			},
			// 获取内容
			async getRequestFn() {
				let res = await api.recycleBin();
				if (res.code === 0) {
					this.value = res.data;
				}
			}
		}
	}
</script>

<style>
</style>